<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css " href="../css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="../css/dropload.css"/>
        <link rel="stylesheet" type="text/css" href="../css/pingjia.css">
    </head>
    <body>
        <header class="header">
            <div class="left">
                <img src="../imgs/fanhui.png"/>
            </div>
            <div class="center">评价</div>
            <div class="right"></div>
        </header>

        <section class="sec" id="sec">
            <article class="art">
                <ul class="list">
                    <li class="lis">
                    <div class="left">
                        <img src="../imgs/pingjia_01.png"/>
                    </div>
                    <div class="right">
                        <ul class="rit_ul">
                            <li class="rit_li">
                                <div class="rit_p1">
                                    <span>沈梦涵</span>
                                    <div class="imgs">
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/baixing.png"/>
                                    </div>
                                </div>
                                <p class="rit_p2">
                                    用户服务评价内容用户服务评价内容用户服务评价内容用户服。
                                </p>
                            </li>
                        </ul>
                        <div class="huifu">
                            <p class="huifu_p">
                                <san>市民网答复</san>
                                答复内容答复内容答复内容答复内容答复内容答复内容答复内容。
                            </p>
                        </div>
                    </div>
                </li>
                </ul>
            </article>
        </section>
        <script src="../js/flexible.debug.js"></script>
        <script src="../js/flexible_css.debug.js"></script>
        <script src="../js/jquery-1.12.4.min.js"></script>
        <script src="../js/artTemplate.js"></script>
        <script src="../js/dropload.min.js"></script>
       
        <script type="text/html" id="lists">
            {{each lie as v}}
                <li class="lis">
                    <div class="left">
                        <img src="{{v.left}}"/>
                    </div>
                    <div class="right">
                        <ul class="rit_ul">
                            <li class="rit_li">
                                <div class="rit_p1">
                                    <span>{{v.name}}</span>
                                    <div class="imgs">
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/huangxing.png"/>
                                        <img src="../imgs/baixing.png"/>
                                    </div>
                                </div>
                                <p class="rit_p2">
                                    {{v.yh}}
                                </p>
                            </li>
                        </ul>
                    </div>
                </li>
            {{/each}}
        </script>
      <!--  
        <script>
            jQuery(function($){
                
                function aa(star, end){//定义一个方法，下面调用
                   $.ajax({
                        type:"get",
                        url:"../json/pingjia.json",
                        dataType:"json",
                        success:function(data){
                            //console.log(data);获取到数据
                            data = data.slice(star, end);//截取data数据
                            var str = template("lists",{lie: data});
                            //console.log(str);模板数据有了
                            $(".sec .art .list").append($(str));//渲染到页面
                        }
                    }) 
                }
                
                //aa(0,5);
                
                var srt = 0, str = 4;
                
                aa(srt, str);
                
                $(".sec").on("touchmove", function(){
                    //console.log(str,srt)
                    srt += 1;
                    str += 1;
                    aa(srt, str);
                })
                
            })
        </script>
    -->
    
        <script>
            
            $(function(){
                // 页数
                var page = 0;
                // 每页展示5个
                var size = 5;

                // dropload
                $('.sec').dropload({
                    scrollArea : window,
                    threshold : 50,//距离底部50的时候刷新
                    loadDownFn : function(me){
                        //console.log(me);
                        page++;
                        $.ajax({
                            type:"get",
                            url:"../json/pingjia.json",
                            dataType:"json",
                            success: function(data){
                                var arrLen = data.length;
//                                if(arrLen > 0){
//                                    data = data.slice(0, 5);//截取data数据
//                                   var str = template("lists",{lie: data});
                                  //console.log(str);模板数据有了
//                                  $(".sec .art .list").append($(str));//渲染到页面 
                                    
                                  // 如果没有数据
//                                }else{
//                                    // 锁定
//                                    me.lock();
//                                    // 无数据
//                                    me.noData();
//                                }
//                                me.resetload();
                                // 为了测试，延迟1秒加载
                                setTimeout(function(){
                                    // 插入数据到页面，放到最后面
                                    data = data.slice(0, 4);//截取data数据
                                    var str = template("lists",{lie: data});
                                    $(".sec .art .list").append($(str));//渲染到页面
                                    // 每次数据插入，必须重置
                                    me.resetload();
                                },1000);
                            },
                            error: function(xhr, type){
                                //alert('Ajax error!');
                                // 即使加载出错，也得重置
                                me.resetload();
                            }
                        });
                    }
                });
            });

            $(".header .left").on("click", function(){
                location.href = "shezi.html";
            })
                    
        </script>
    
    </body>
</html>